<template>
  <div class="container">
    <globle-header :user="currentUser"></globle-header>
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label class="form-label">邮箱地址</label>
        <validate-input
          :rules="emailRules"
          v-model="emailVal"
          placeholder="请输入邮箱地址"
          type="text"
          ref="inputRef"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label class="form-label">密码</label>
        <validate-input
          :rules="passwordRules"
          v-model="passwordVal"
          placeholder="请输入密码"
          type="password"
        ></validate-input>
      </div>
      <template #submit>
        <span class="btn btn-danger">Submit</span>
      </template>
    </validate-form>
    <column-list :list="list"></column-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import "bootstrap/dist/css/bootstrap.min.css";
import ColumnList from "./components/ColumnList.vue";
import { ColumnProps } from "./components/ColumnList.vue";
import GlobleHeader from "./components/GlobleHeader.vue";
import { UserProps } from "./components/GlobleHeader.vue";
import validateInput from "./components/ValidateInput.vue";
import { RulesProp } from "./components/ValidateInput.vue";
import ValidateForm from "./components/ValidateForm.vue";
const testData: ColumnProps[] = [
  {
    id: 1,
    title: "文章一",
    description: "描述111111",
    avatar:
      "https://portrait.gitee.com/uploads/avatars/user/1735/5207809_xiao_meng_mua_1607327332.png!avatar30"
  }
];
const currentUser: UserProps = {
  isLogin: true,
  name: "love you"
};
export default defineComponent({
  name: "App",
  components: {
    // ColumnList,
    GlobleHeader,
    validateInput,
    ValidateForm
  },
  setup() {
    const inputRef = ref<any>();
    const emailRules: RulesProp = [
      {
        type: "required",
        message: "电子邮箱地址不能为空"
      },
      {
        type: "email",
        message: "请输入正确的电子邮箱格式"
      }
    ];
    const emailVal = ref("viking");
    const emailRef = reactive({
      val: "",
      error: false,
      message: ""
    });
    const validateEmail = () => {
      if (emailRef.val.trim() === "") {
        emailRef.error = true;
        emailRef.message = "can not be empty";
      }
    };
    const passwordVal = ref("123");
    const passwordRules: RulesProp = [
      {
        type: "required",
        message: "密码不能为空"
      }
    ];
    const onFormSubmit = (result: boolean) => {
      // console.log(inputRef.value.validateInput());
    };
    return {
      list: testData,
      currentUser,
      emailRef,
      validateEmail,
      emailRules,
      emailVal,
      passwordVal,
      passwordRules,
      onFormSubmit,
      inputRef
    };
  }
});
</script>

<style></style>
